<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue起步</title>
</head>
<body>
  <div id="app">
    <p>{{message}}</p>
    <input type="text" v-model="message">
  </div>
  <div id="todo">
    <li v-for="todo in todos" :class="{'classa':isa[$index]==1, 'classb':isb[$index]}">
      {{todo.text}}
    </li>
  </div>
  
  <div id="todo2">
    <input v-model="newTodo" v-on:keyup.enter="addTodo">
    <li v-for="todo in todos">
      <span>{{todo.text}}</span>
      <button v-on:click="removeTodo($index)">X</button>
    </li>
  </div>
  <script src="js/vue.js" charset="utf-8"></script>
  <script>
    new Vue({
      el:"#app",
      data:{
        message:"Hello vue.js!"
      }
    });
    
    var todoVm = new Vue({
      el:"#todo",
      data:{
        todos:[
          {text:"这事第一个"},
          {text:"这事第2个"},
          {text:"这事第3个"}
        ],
        isa:[1, 1, 1],
        isb:[1, 1, 1]
      }
    });

    todoVm.isa[1] = -1;
    
    new Vue({
      el:"#todo2",
      data:{
        newTodo:"",
        todos:[{text:"添加点什么"}]
      },
      methods:{
        addTodo: function(){
          var text = this.newTodo.trim();
          if(text){
            this.todos.push({text:text});
          }
          this.newTodo = "";
        },
        removeTodo: function(index){
          this.todos.splice(index, 1);
        }
      }
    });
  </script>
</body>
</html>